import { ProCard } from '@ant-design/pro-components';
import { PageContainer } from '@ant-design/pro-layout';
import RcResizeObserver from 'rc-resize-observer';
import { useState } from 'react';
import Line from './Line';
import Pie from './Pie'
import Radar from './Radar';
import WordCloud from "./WordCloud";
import Point from "./Point";

export default () => {
  const [responsive, setResponsive] = useState(false);

  return (
    <PageContainer>
      <RcResizeObserver
        key="resize-observer"
        onResize={(offset) => {
          setResponsive(offset.width < 596);
        }}
      >
        <ProCard
          // title="复杂切分"
          // extra="2019年9月28日"
          bordered
          headerBordered
          split={responsive ? 'horizontal' : 'vertical'}
        >
          <ProCard split="horizontal" colSpan={6}>
            <ProCard split="horizontal">
              <ProCard split={responsive ? 'horizontal' : 'vertical'}>
                <ProCard title="GDP与人均寿命">
                  <Point></Point>
                </ProCard>
              </ProCard>
              {/* <ProCard split="vertical">
                <ProCard title="运行中试验">12/56</ProCard>
                <ProCard title="历史试验总数">134 个</ProCard>
              </ProCard> */}
            </ProCard>
            <ProCard title="折线图">
              <Line></Line>
            </ProCard>
          </ProCard>
          <ProCard colSpan={12} title="词云">
            <WordCloud></WordCloud>
          </ProCard>
          <ProCard colSpan={6} split="horizontal">
            <ProCard title="饼图" gutter={[24, 12]}>
              <Pie></Pie>
            </ProCard>
            <ProCard title="雷达图" gutter={[24, 12]}>
              <Radar></Radar>
            </ProCard>
          </ProCard>
        </ProCard>
      </RcResizeObserver>
    </PageContainer>
  );
};
